<template>
  <div style="background-color: #fff; padding: 10px">
    <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="物种图片视频上传" name="WZ">
        <AnimalPlantView ref="animalPlantViewRef" />
      </el-tab-pane>
      <el-tab-pane label="宣教馆图片视频上传" name="XJG">
        <EducationRoomView ref="educationRoomViewRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="ZLEducationView">
import { ref } from 'vue'
import { TabsPaneContext } from 'element-plus'
import AnimalPlantView from './animal-plant-view.vue'
import EducationRoomView from './education-room-view.vue'

const animalPlantViewRef = ref<InstanceType<typeof AnimalPlantView> | null>(null)
const educationRoomViewRef = ref<InstanceType<typeof EducationRoomView> | null>(null)
const activeName = ref('WZ')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.props.name)
  console.log(event)
  console.log('activeName', activeName.value)
}

/**打开表单 */
// function openForm(category: string, type: FormType, id?: number) {
//   formRef.value?.open(category, type, id)
// }

// function openBatchForm(category: string, ids: string) {
//   formRef.value?.openBatch(category, ids)
// }

// function refresh() {
//   animalPlantViewRef.value?.refresh()
//   educationRoomViewRef.value?.refresh()
// }
</script>
